<template>
    <div class="wh100p ovy-s fysxs">
        <!-- nav -->
        <div class="w100p">
            <van-nav-bar
                left-text="返回"
                right-text="添加"
                left-arrow
                @click-left="onClickLeft"
                @click-right="addItem"
            >
                <template #title>
                    <span class="t14">{{title}}</span>
                </template>
            </van-nav-bar>
        </div>
        <!-- 修改和增加 -->
        <goods-set
            class="pof:t50x"
            v-if="isShowSet"
            :newdata="itemData"
            buttontext="修改"
            @submit-data="submitData"
            @noset="isShowGoodsSet"
        />

        <goods-set
            class="pof:t50x"
            v-if="isShowSubmit"
            :newdata="itemData"
            buttontext="增加"
            @submit-data="submitData"
            @noset="addItem"
        />
        <!-- 展示 -->
        <div class="w100p fx-g1 ovy-s">
            <van-swipe-cell v-for="(item, index) in goods" :key="item._id">
                <van-card
                    :price="item.price"
                    :title="item.title"
                    :thumb="item.img"
                >
                    <template #desc>
                        <span class="t12 tc-9">{{item.des}}</span>
                    </template>
                </van-card>
                <template #right>
                    <van-button class="h100p" square text="修改" type="info" @click="setItem(index)" />
                    <van-button class="h100p" square text="删除" type="danger" @click="remove(index,item._id)" />
                </template>
            </van-swipe-cell>
        </div>
    </div>
</template>

<script>
import { Dialog, Toast } from "vant";
import GoodsSet from "@/components/GoodsSet.vue";
export default {
    naem: "GoodsDetail",
    components: { GoodsSet },
    data() {
        return {
            isShowSet: false,
            isShowSubmit: false,
            itemData: {},
        };
    },

    computed: {
        goods(){
            return this.$store.getters.getGoodsData(this.index)
        },
        title() {
            return this.$router.history.current.params.title;
        },
        index() {
            return this.$router.history.current.params.index;
        },
    },

    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        onClickRight() {
            this.isShowSubmit = true;
        },
        addItem() {
            this.itemData = { title: this.title };
            this.isShowSubmit = !this.isShowSubmit;
        },
        setItem(index) {
            const item = this.goods[index];
            this.itemData = { title: this.title, index, item };
            this.isShowSet = !this.isShowSet;
        },
        isShowGoodsSet() {
            this.isShowSet = false;
        },
        submitData(data) {
            console.log(data);
        },
        remove(index,id) {
            Dialog.confirm({
                message: "是否删除此商品？？",
            }).then(() => {
                return this.$store.dispatch("delGoodsServer", {
                    listIndex: this.index,
                    dataIndex: index,
                    id: id
                }) 
            }).then(()=>{
                Toast.success("商品已删除");
            })
        },
    },

    // created() {
    //     const data = this.$store.getters.getGoodsData(this.index);
    //     this.goods = data;
    // },
};
</script>

<style>
</style>
